
<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="车牌号码:" prop="carNumber">
          <el-input v-model="formInline.carNumber" placeholder="请输入车牌号码" />
        </el-form-item>
        <el-form-item label="车主姓名:" prop="personName">
          <el-input v-model="formInline.personName" placeholder="请输入车主姓名" />
        </el-form-item>
        <el-form-item label="状态:" prop="cardStatus">
          <el-select v-model="formInline.cardStatus" placeholder="未选择">
            <el-option label="全部" value="" />
            <el-option label="可用" value="0" />
            <el-option label="已过期" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="small" @click="$router.push('/cardAdd')">添加月卡</el-button>
      <el-button type="primary" size="small" @click="delCard(null)">批量删除</el-button>
    </div>
    <el-table
      ref="tableRef"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" width="60" :index="getIndex" type="index" align="center" />
      <el-table-column prop="personName" label="车主名称" align="center" width="90" />
      <el-table-column prop="phoneNumber" label="联系方式" align="center" />
      <el-table-column prop="carNumber" label="车牌号码" align="center" />
      <el-table-column prop="carBrand" label="车辆品牌" align="center" />
      <el-table-column prop="totalEffectiveDate" label="剩余有效天数" align="center" show-overflow-tooltip />
      <el-table-column label="状态" show-overflow-tooltip align="center">
        <template #default="{ row }">
          {{ row.cardStatus === 1? '已过期': '可用' }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template #default="{ row }">
          <el-button type="text">续费</el-button>
          <el-button type="text" @click="$router.push(`/cardAdd/${row.id}/edit`)">查看</el-button>
          <el-button type="text" @click="$router.push(`/cardAdd/${row.id}`)">编辑</el-button>
          <el-button type="text" @click="delCard(row.id)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
    <el-row type="flex" style="height:60px" align="middle" justify="end">
      <el-pagination
        :current-page="formInline.page"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="formInline.pageSize"
        layout="total, prev, pager, next, sizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>

  </div>
</template>

<script>
import { delAllCardApi, delCardsApi, getCardListApi } from '@/api/card'
import { mapGetters } from 'vuex'

export default {
  name: 'CardView',

  data() {
    return {
      formInline: {
        page: 1,
        pageSize: 5,
        carNumber: '',
        personName: '',
        cardStatus: ''
      },
      tableData: [],
      multipleSelection: [],
      total: 0,
      newIndex: 0,
      // 已选择列表
      selectedCarList: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.getCardList()
  },
  methods: {
    onSubmit() {
      this.formInline.page = 1
      this.getCardList()
    },
    async getCardList() {
      const res = await getCardListApi(this.formInline)
      this.total = res.total
      this.tableData = await res.rows
    },
    handleCurrentChange(newPage) {
      this.formInline.page = newPage
      this.getCardList()
    },
    handleSizeChange(newPageSize) {
      this.formInline.pageSize = newPageSize
      this.getCardList()
    },
    getIndex(index) {
      return (this.formInline.page - 1) * this.formInline.pageSize + index + 1
    },
    async delCard(id) {
      console.log('lasjfdlasfd' + id)

      // 调用接口
      if (id) {
        await delCardsApi(id)
      } else {
        if (this.selectedCarList.length === 0) {
          this.$message({
            type: 'warning',
            message: '请选择要删除的月卡!'
          })
          return
        } else {
          await delAllCardApi(this.selectedCarList.map(item => item.id))
        }
      }
      this.$message.success('删除成功~')
      // 判断是否大于一页且只有一条数据
      // if (this.tableData.length === 1 && this.formInline.page > 1) {
      //   this.formInline.page--
      // }
      // 重新获取数据
      this.getCardList()
    },
    handleSelectionChange(rowList) {
      // console.log(rowList)
      this.selectedCarList = rowList
      // console.log(this.selectedCarList.map(item => item.id) + '1231')
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>

